<template>
  <div>
    <nav :class="scrollTop>200 ? 'navAfter' : 'navInit' ">
      <div>
        <ul>
          <li @mouseover="onHover" :style="hover">首页</li>
          <li>博客</li>
          <li>时光轴</li>
          <li>留言板</li>
          <li>友人帐</li>
          <li>关于我</li>
        </ul>
      </div>
    </nav>
    <section id="content" :style="hign">
      <div class="title">
        <div class="title_name">
          断肠人.
        </div>
        <div class="title_introduction">
          <p>
            道阻且长
          </p>
          <p>
            行则将至
          </p>
        </div>
      </div>
      <div id="down">
        <a><img src="../../static/down.png" /></a>
      </div>
    </section>
    <section>
      <div id="introduction">
        <div class="introduction_topic">
          — 欢迎走进我的世界 —
        </div>
        <div class="introduction_content">
          <p v-html="introduction"></p>
        </div>
        <div class="introduction_about">
          <a-button type="danger" shape="round" size="large" @click="" />
        </div>
      </div>
    </section>
    <section>
      <div id="article">
        <div class="article_topic">
          — 文章推荐 —
        </div>
        <div class="article_content">
          <!-- <div class="article_box">
            <div v-for="(item,index) in articleList" class="article_content_div">
              <a>
                {{item.name}}
              </a>
              <p>
                {{item.introduction}}
              </p>
            </div>
          </div> -->
        </div>
      </div>
    </section>
    <footer id="footer" :style="footer">
      <div class="footer_content">
        <div class="footer_content_first">
          <div><span style="color: white;">更新时间:</span><span style="color: blue;">{{updateTime}}</span></div>
          <div>啥也不是</div>
        </div>
        <hr />
        <div class="footer_content_last">
          <p style="color: white;font-size: 15px;">
            Copyright © 2019-2020 冬雪's Blog。盗版必究 陕ICP备19018129号
          </p>
        </div>
      </div>
    </footer>
  </div>
</template>

<script>
  import $ from 'jquery'
  export default {
    data() {
      return {
        updateTime: '',
        footer: '',
        hign: '',
        background: '',
        scrollTop: '',
        hover: '',
        introduction: '',
        articleList: [{
          name: 'Java',
          introduction: 'Java​（静态）变量、（静态）代码块的执行顺序  顺序：    Java中的静态变量和静态代码块是在类加载时就执行的。    实例化对象时，先声明并实例化变量再执行构造函数。 如果子类继承父类，则先'
        }, {
          name: 'Python',
          introduction: ' 基础数据类型总结    a) 基础类型      byte 8 char 16 short 16 int 32 float 32 long 64 double 64 boolean ~      注',
        }, {
          name: 'Python',
          introduction: ' 基础数据类型总结    a) 基础类型      byte 8 char 16 short 16 int 32 float 32 long 64 double 64 boolean ~      注',
        }, {
          name: 'Python',
          introduction: ' 基础数据类型总结    a) 基础类型      byte 8 char 16 short 16 int 32 float 32 long 64 double 64 boolean ~      注',
        }, {
          name: 'Python',
          introduction: ' 基础数据类型总结    a) 基础类型      byte 8 char 16 short 16 int 32 float 32 long 64 double 64 boolean ~      注',
        }, {
          name: 'Python',
          introduction: ' 基础数据类型总结    a) 基础类型      byte 8 char 16 short 16 int 32 float 32 long 64 double 64 boolean ~      注',
        }, {
          name: 'Python',
          introduction: ' 基础数据类型总结    a) 基础类型      byte 8 char 16 short 16 int 32 float 32 long 64 double 64 boolean ~      注',
        }, {
          name: 'Python',
          introduction: ' 基础数据类型总结    a) 基础类型      byte 8 char 16 short 16 int 32 float 32 long 64 double 64 boolean ~      注',
        }, {
          name: 'Python',
          introduction: ' 基础数据类型总结    a) 基础类型      byte 8 char 16 short 16 int 32 float 32 long 64 double 64 boolean ~      注',
        }],
      }
    },
    created() {
      console.log("-你所浪费的今天-")
      console.log("-是昨日死去之人苦苦奢望的明天-")
      console.log("-你所厌恶的现在-")
      console.log("-是明日的你再也回不去的曾经-")
      console.log("QQ:2535805167")
      this.getBackGroundImg();
      this.getIntroduction();
    },
    mounted() {
      this.hign = "height:" + document.documentElement.clientHeight + "px;"
      this.hign = this.hign + "background-image: url(" + this.background + ");"
      this.footer = "background-image: url(" + this.background + ");"
      window.addEventListener('scroll', this.handleScroll, true);
    },
    methods: {
      /**
       * 背景图片动态加载
       */
      getBackGroundImg() {
        this.background = '../../static/background.png';
        this.$notification.success({
          message: '通知',
          description: 'Background loading Over ~ ',
          duration: 2.5
        })
      },
      /**
       * 获取简介
       */
      getIntroduction() {
        this.introduction = '<p>-你所浪费的今天-</p><p>-是昨日死去之人苦苦奢望的明天-</p><p>-你所厌恶的现在-</p><p>-是明日的你再也回不去的曾经-</p>';
        this.$notification.success({
          message: '通知',
          description: 'Introduction loading Over ~ ',
          duration: 2.5,
          placement: 'bottomLeft',
        })
      },
      /**
       * 监听滑轮高度
       */
      handleScroll() {
        this.scrollTop = Math.floor(document.body.scrollTop || document.documentElement.scrollTop || window.pageXOffset)
      },
      onHover() {
        this.hover = 'border-bottom: solid;border-color: white;'
      }
    }
  }
</script>

<style scoped="scoped">
  .navInit {
    width: 100%;
    height: 1.2rem;
    position: fixed;
    z-index: 99;
  }

  .navAfter {
    width: 100%;
    height: 1.2rem;
    background-color: black;
    position: fixed;
    z-index: 99;
  }

  nav div {
    width: 40%;
    margin-left: 45%;
    height: 100%;
  }

  nav div ul {
    display: flex;
    justify-content: space-between;
    text-align: center;
    line-height: 1.2rem;
  }

  nav div ul li {
    font-family: 'zhulang';
    font-size: 0.3rem;
    font-weight: bold;
    color: white;
    width: 1rem;
  }

  #content {
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-color: rgba(255, 255, 255, .5);
    background-size: 100% 100%;
    width: 100%;
    opacity: 1;
  }

  .title {
    height: 6.25rem;
    width: 6.25rem;
    margin: 0 auto;
    position: relative;
    top: 32%;
  }

  .title_name {
    border-bottom: 1px solid white;
    border-top: 1px solid white;
    color: white;
    font-weight: bold;
    font-family: 'zhulang';
    font-size: 0.5rem;
    line-height: 40px;
    text-align: center;
    height: 40px;
    width: 100px;
    position: absolute;
    left: 27%;
    top: 13%;
  }

  .title_introduction {
    height: 2rem;
    width: 100px;
    position: absolute;
    left: 27%;
    top: 38%;
    color: white;
    font-size: 0.4rem;
    font-family: 'zhulang';
    font-weight: bold;
  }

  .title_introduction :first-child {
    letter-spacing: 5px;
    position: absolute;
    margin-left: 15%;
  }

  .title_introduction :last-child {
    letter-spacing: 5px;
    position: absolute;
    top: 40%;
    margin-left: 15%;
  }

  #down {
    /*    background-color: black; */
    height: 20px;
    width: 20px;
    position: absolute;
    bottom: 1%;
    left: 49%;
  }

  #down img {
    width: 100%;
    height: 100%;
  }

  #introduction {
    width: 100%;
    height: 270px;
    display: flex;
    justify-content: center;
    flex-direction: column;
  }

  .introduction_topic {
    text-align: center;
    font-family: 'zhulang';
    font-size: 25px;
    color: black;
    font-weight: bold;
    height: 60px;
  }

  .introduction_content {
    text-align: center;
    font-family: 'zhulang';
    font-size: 13px;
    color: black;
    font-weight: 900;
  }

  .introduction_about {
    text-align: center;

  }

  #article {
    width: 100%;
    height: 500px;
    display: flex;
    flex-direction: column;
    background-color: #f7f7f9;
  }

  .article_topic {
    text-align: center;
    font-family: 'zhulang';
    font-size: 25px;
    color: black;
    font-weight: bold;
    height: 60px;
  }

  .article_content {
    background-color: pink;
    width: 100%;
    height: 440px;
    margin: auto;
  }

  .article_content_div {
    float: left;
    width: 33%;
    height: 100px;
    line-height: 100px;
    background-color: black;
  }

  #footer {
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-color: rgba(255, 255, 255, .5);
    background-size: 100% 100%;
    width: 100%;
    opacity: 1;
    height: 200px;
    display: flex;
    flex-direction: column;
  }

  .footer_content {
    margin: auto;
    height: 150px;
    width: 25rem;
    align-items: center;
    background-color: #000000;
    justify-content: center;
    display: flex;
    flex-direction:column;
  }
  .footer_content_first {
    width: 70%;
    height: 0.5rem;
    display: flex;
    justify-content:spacebetween;
  }
  .footer_content_first first-child{
    width: 30px;
    line-height: 0.5rem;
    height: 0.5rem;
  }
  .footer_content_first last-child{
    width: 30px;
    line-height: 0.5rem;
    height: 0.5rem;
  }
  .footer_content_last {
    width: 70%;
    justify-content: center;
  }
</style>
